<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>011</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			.box {
				width: 700px;
				height: 438px;
				margin: 100px auto;
				border: 1px solid #000000;
				position: relative;
			}
			
			/*呼吸轮播图的布局关键是所有图片落在一起*/
			.box .imgs ul {
				list-style: none;
			}
			.box .imgs ul li {
				width: 100%;
				height: 100%;
				left: 0;
				top: 0;
				position: absolute;
				display: none;
			}
			.box .imgs ul li:first-child {
				display: block;
			}
			
			.btns a {
				width: 30px;
				height: 60px;
				top: 50%;
				margin-top: -30px;
				background-color: rgba(0,0,0,.5);
				color: #FFFFFF;
				font-size: 20px;
				line-height: 60px;
				text-align: center;
				text-decoration: none;
				/*开口变大*/
				font-family: consolas;
				position: absolute;
			}
			.btns a:first-child {
				left: 0px;
			}
			.btns a:last-child {
				right: 0px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="imgs" id="imgs">
				<ul>
					<li><img src="../img/b_1.jpg" ></li>
					<li><img src="../img/b_2.jpg" ></li>
					<li><img src="../img/b_3.jpg" ></li>
					<li><img src="../img/b_4.jpg" ></li>
					<li><img src="../img/b_5.jpg" ></li>
				</ul>
			</div>
			<div class="btns">
				<a href="javascript:void(0)" id="leftBtn">&lt;</a>
				<a href="javascript:void(0)" id="rightBtn">&gt;</a>
			</div>
		</div>
		
		
		
		<!--引入jquery包-->
		<script type="text/javascript" src="../js/jquery-3.4.1.js"></script>
		<script type="text/javascript">
			//获取元素
			var $leftBtn = $("#leftBtn");
			var $rightBtn = $("#rightBtn");
			var $imgs = $("#imgs ul li");
			
			//定义length
			var length = $imgs.length;
			
			//定义信号量
			var idx = 0;
			
			//右按钮点击事件
			$rightBtn.click(function() {
				//当前图片淡出
				$imgs.eq(idx).fadeOut(1000);
				
				//信号量改变
				idx++;
				//边界判定
				if (idx > length-1) {
					//idx归0
					idx = 0;
				}
				console.log(idx);
				//下一张图片淡入
				$imgs.eq(idx).fadeIn(1000);
			})
			
			//左按钮点击事件
			$leftBtn.click(function() {
				//当前图片淡出
				$imgs.eq(idx).fadeOut(1000);
				
				//信号量改变
				idx--;
				//边界判定
				if (idx < 0) {
					//idx变为最大，即最后一张
					idx = length-1;
				}
				console.log(idx);
				//下一张图片淡入
				$imgs.eq(idx).fadeIn(1000);
			})
			
		</script>
	</body>
</html>
